<template>
	<div class="search">
		<div class="search_t">
			<el-tabs v-model="activeName" class="search_tab" @tab-click="fun_keyword" v-loading="loading">
				<el-tab-pane name="first">
					<span slot="label"><i class="el-icon-eleme"></i> 按关键字搜索</span>
					<!--  按关键字搜索盒子 -->
					<div class="content_left_t" style="margin-bottom: 10px;overflow: hidden;">
						<!-- 搜索 -->
						<div style="width: 480px;overflow: hidden;float: left;">
							<!-- 搜索框 -->
							<el-input placeholder="请输入UP主名称或者B站UID" class="input-with-select">
								<el-button slot="append" icon="el-icon-search"
									style="height: 35px;background-color: #5830a0;color: #fff;font-size: 15px;">搜索UP主
								</el-button>
							</el-input>
						</div>
						<!-- 切换下盒子内容 -->
						<p @click="screen=!screen"
							style="float: left;line-height: 35px;font-size: 14px;color: #8097b1;margin-left: 20px;cursor:pointer;"
							:class="{'screen_p':screen==false}">
							{{screen?"收起":"展开"}}筛选条件
							<i
								:class="{'el-icon-arrow-down':screen==true,'el-icon-arrow-up':screen==false,'screen_p':screen==false}"></i>
						</p>
						<!-- 按钮 -->
						<el-button type="primary" icon="el-icon-user-solid" size="mini"
							style="float: right;background-color: #b898d0;color: #fdfdfe;border: 0;">
							UP主收录</el-button>
					</div>
					<!-- 筛选内容模块 -->
					<div class="screen" v-show="screen">
						<h2 style="font-size: 16px;font-weight: 400;margin: 15px 0;"><span></span>筛选条件</h2>
						<!-- UP主分类 -->
						<div class="classify">
							<p>UP主分类 :</p>
							<ul>
								<li @click="fun_classify(0)" :class="{'li_action':classify0==0}">全部</li>
								<li @click="fun_classify(index+1)" v-for="(item,index) in classifylist" :key="index"
									:class="{'li_action':classify0==index+1}">
									{{item.TagName}}
								</li>
							</ul>
						</div>
						<!-- UP主属性: -->
						<div class="classify">
							<p>UP主属性 :</p>
							<ul>
								<li @click="classify1=0" :class="{'li_action':classify1==0}">全部</li>
								<li @click="classify1=index+1" v-for="(item,index) in propertyfylist" :key="index"
									:class="{'li_action':classify1==index+1}">
									{{item.Name}}
								</li>
							</ul>
						</div>
						<!-- U粉丝数量: -->
						<div class=" classify">
							<p>粉丝数量 :</p>
							<ul>
								<li class="li_action">全部</li>
								<li>100万以上</li>
								<li>50-100万</li>
								<li>10-50万</li>
								<li>1-10万</li>
								<li>5千-1万</li>
								<li>5千以下</li>
								<li>自定义</li>
							</ul>
						</div>
						<!-- 近期投稿: -->
						<div class="classify">
							<p>近期投稿 :</p>
							<ul>
								<li class="li_action">全部</li>
								<li>近30天</li>
								<li>近15天</li>
								<li>近7天</li>
								<li>近3天</li>
							</ul>
						</div>
						<!-- UP主认证: -->
						<div class="authen">
							<el-form ref="form" :model="form" label-width="80px" class="form_inp">
								<el-form-item label="UP主认证:" label-position="top">
									<el-select v-model="region" placeholder="全部">
										<el-option label="全部" value="quanbu"></el-option>
										<el-option label="未认证" value="weirenzheng"></el-option>
									</el-select>
								</el-form-item>
							</el-form>
							<el-form ref="form" :model="form" label-width="80px" class="form_inp">
								<el-form-item label="UP主性别:" label-position="top">
									<el-select v-model="region" placeholder="全部">
										<el-option label="全部" value="quanbu"></el-option>
										<el-option label="男" value="nan"></el-option>
										<el-option label="女" value="nv"></el-option>
									</el-select>
								</el-form-item>
							</el-form>
							<el-form ref="form" :model="form" label-width="80px" class="form_inp">
								<el-form-item label="UP主报价:" label-position="top">
									<el-select v-model="region" placeholder="全部">
										<el-option label="全部" value="quanbu"></el-option>
										<el-option label="<2千" value="er"></el-option>
										<el-option label="2-5千" value="erwu"></el-option>
										<el-option label="5千-1万" value="wuyiwan"></el-option>
										<el-option label="1万-3万" value="yisan"></el-option>
										<el-option label="3万-5万" value="sanwu"></el-option>
										<el-option label=">10万" value="shi"></el-option>
									</el-select>
								</el-form-item>
							</el-form>
							<el-form ref="form" :model="form" label-width="80px" class="form_inp">
								<el-form-item label="UP主等级:" label-position="top">
									<el-select v-model="region" placeholder="全部">
										<el-option label="全部" value="quanbu"></el-option>
										<el-option label="Lv0" value="Lv0"></el-option>
										<el-option label="Lv1" value="Lv1"></el-option>
										<el-option label="Lv2" value="Lv2"></el-option>
										<el-option label="Lv3" value="Lv3"></el-option>
										<el-option label="Lv4" value="Lv4"></el-option>
										<el-option label="Lv5" value="Lv5"></el-option>
									</el-select>
								</el-form-item>
							</el-form>
							<el-form ref="form" :model="form" label-width="80px" class="form_inp">
								<el-form-item label="UP主情况:" label-position="top">
									<el-select v-model="region" placeholder="全部">
										<el-option label="全部" value="quanbu"></el-option>
										<el-option label="未开通" value="weikaitong"></el-option>
										<el-option label="大会员" value="dahuiyuan"></el-option>
										<el-option label="年度大会员" value="niandu"></el-option>
									</el-select>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="按视频内容搜索" name="second" v-loading="loading">
					<span slot="label"><i class="el-icon-s-platform"></i> 按视频内容搜索</span>
					<!--  按关键字搜索盒子 -->
					<div class="content_left_t" style="margin-bottom: 10px;overflow: hidden;">
						<!-- 搜索 -->
						<div style="width: 480px;overflow: hidden;float: left;">
							<!-- 搜索框 -->
							<el-input placeholder="请输入UP主名称或者B站UID" class="input-with-select">
								<el-button slot="append" icon="el-icon-search"
									style="height: 35px;background-color: #5830a0;color: #fff;font-size: 15px;">搜索UP主
								</el-button>
							</el-input>
						</div>
						<!-- 切换下盒子内容 -->
						<p @click="screen=!screen"
							style="float: left;line-height: 35px;font-size: 14px;color: #8097b1;margin-left: 20px;cursor:pointer;"
							:class="{'screen_p':screen==false}">
							{{screen?"收起":"展开"}}筛选条件
							<i
								:class="{'el-icon-arrow-down':screen==true,'el-icon-arrow-up':screen==false,'screen_p':screen==false}"></i>
						</p>
						<!-- 按钮 -->
						<el-button type="primary" icon="el-icon-user-solid" size="mini"
							style="float: right;background-color: #b898d0;color: #fdfdfe;border: 0;">
							UP主收录</el-button>
					</div>
					<!--  按关键字搜索盒子 -->
					<!-- 筛选内容模块 -->
					<div class="screen" v-show="screen">
						<h2 style="font-size: 16px;font-weight: 400;margin: 15px 0;"><span></span>UP主筛选条件</h2>
						<!-- UP主属性: -->
						<div class="classify">
							<p>UP主属性 :</p>
							<ul>
								<li @click="classify1=0" :class="{'li_action':classify1==0}">全部</li>
								<li @click="classify1=index+1" v-for="(item,index) in propertyfylist" :key="index"
									:class="{'li_action':classify1==index+1}">
									{{item.Name}}
								</li>
							</ul>
						</div>
						<!-- U粉丝数量: -->
						<div class=" classify">
							<p>粉丝数量 :</p>
							<ul>
								<li class="li_action">全部</li>
								<li>100万以上</li>
								<li>50-100万</li>
								<li>10-50万</li>
								<li>1-10万</li>
								<li>5千-1万</li>
								<li>5千以下</li>
								<li>自定义</li>
							</ul>
						</div>
						<h2 style="font-size: 16px;font-weight: 400;margin: 15px 0;"><span></span>视频筛选条件</h2>
						<!-- UP主分类 -->
						<div class="classify">
							<p>UP主分类 :</p>
							<ul>
								<li @click="classify0=0" :class="{'li_action':classify0==0}">全部</li>
								<li @click="classify0=index+1" v-for="(item,index) in classifylist" :key="index"
									:class="{'li_action':classify0==index+1}">
									{{item.TagName}}
								</li>
							</ul>
						</div>
						<!-- 近期投稿: -->
						<div class="classify">
							<p>视频类型 :</p>
							<ul>
								<li class="li_action">全部</li>
								<li>自治视频</li>
								<li>转载视频</li>
							</ul>
						</div>
						<!-- 近期投稿: -->
						<div class="classify">
							<p>近期投稿 :</p>
							<ul>
								<li class="li_action">全部</li>
								<li>近30天</li>
								<li>近15天</li>
								<li>近7天</li>
								<li>近3天</li>
							</ul>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<!-- UP主信息内容 -->
		<div class="search_b" v-if="keyword==0" v-loading="loading">
			<el-tabs v-model="search_b_tab" type="card" @tab-click="fun_getUpInfo" v-loading="loading">
				<el-tab-pane label="总粉丝最多" name="first">总粉丝最多</el-tab-pane>
				<el-tab-pane label="涨粉丝最多" name="second">涨粉丝最多
				</el-tab-pane>
				<el-tab-pane label="总充电最多" name="zong">总充电最多</el-tab-pane>
				<el-tab-pane label="月充电最多" name="yue">月充电最多</el-tab-pane>
				<el-tab-pane label="均播放最多" name="junbo">均播放最多
				</el-tab-pane>
				<el-tab-pane label="均点赞最多" name="dianzan">均点赞最多
				</el-tab-pane>
				<el-tab-pane label="均投币最多" name="tobi">均投币最多</el-tab-pane>
			</el-tabs>
			<div class="ceiling"
				style="width: 100%;display: flex;height: 41px;background-color: #f7f8fa;line-height: 41px;font-size: 14px;color: #2e384d;">
				<p style="flex: 4;padding-left: 10px;">UP主信息</p>
				<p style="flex: 1;">最新投稿时间</p>
				<p style="flex: 1;">粉丝数</p>
				<p style="flex: 1;">近10部视频</p>
				<p style="flex: 1;">充电数</p>
			</div>
			<!-- UP信息 -->
			<div class="up_info" v-if="upList.length">
				<ul>
					<li style="display: flex;padding: 15px 0;" v-for="(item,index) in upList" :key="index">
						<img :src="'/bfs'+item.AvatarUrl.substr(23)" alt="" width="50px">
						<div class="info_content" style="flex: 3.5;padding-left: 10px;">
							<!-- 标题名 -->
							<div class="info_title">
								<div>
									<p>{{item.NickName}}</p>
									<span
										style="border-color: #ff4057;color: #ff405c;background-color: #fff8f8;">lv{{item.LevelNumber}}</span>
									<span
										style="border-color: #0085ff;color: #0085ff;background-color:#f1f8ff;">{{item.Vip}}</span>
									<span
										style="border-color: #fb7399;color: #fb7399;background-color:#fff3f6;">粉</span>
									<span
										style="border-color: #8c61ff;color: #8c61ff;background-color:#f8f6ff;">综合</span>
									<button :class="{'action_bun':item.Sex!=2}">{{item.Sex==2?"男粉":"女粉"}}多</button>
								</div>
							</div>
							<!-- id -->
							<div class="info_id">
								<p>
									<span style="color: #8798ad;">UID: </span>{{item.PlayCount}}
									<span style="color: #387cff;margin: 0 5px;">{{item.BloggerPropsName}}</span>
									<i class="el-icon-share"></i>
									{{item.OfficialTitle}}
								</p>
							</div>
							<!-- 个性签名 -->
							<div class="selfdom" style="font-size: 13px;">
								<p style="padding: 0 0 10px 0;"><span style="color: #8798ad;">个性签名: </span>{{item.Sign}}
								</p><br>
								<span>{{item.ChildTag[0]}}</span>
								<span>{{item.ChildTag[1]}}</span>
								<span>{{item.ChildTag[2]}}</span>
							</div>
						</div>
						<!-- 日期 -->
						<div class="info_time"
							style="flex: 1;line-height: 90px;padding-left: 35px;box-sizing: border-box;">
							{{item.LastPubTime.slice(0,10)}}
						</div>
						<!-- 粉丝数 -->
						<div class="info_num" style="flex: 1;">
							<p style="font-size: 14px;color: #3f3a4f;padding:5px 0;"><span
									style="color: #8798ad;">粉丝数:</span>{{parseInt(item.Fans/100)/100}}万</p>
							<p style="font-size: 14px;color: #3f3a4f;padding:5px 0;"><span
									style="color: #8798ad;">涨粉数:</span>{{parseInt(item.FansAdd/100)/100}}万</p>
							<p style="font-size: 14px;color: #3f3a4f;padding:5px 0;"><span
									style="color: #8798ad;">涨粉率:</span>{{parseInt(item.FansAddRate*10000)/100+'%'}}</p>
						</div>
						<!-- 平均播放 -->
						<div class="info_mean" style="flex: 1;">
							<p style="font-size: 14px;color: #3f3a4f;padding:5px 0;"><span
									style="color: #8798ad;">平均播放:</span>{{item.AvgPlayCount/100}}万</p>
							<p style="font-size: 14px;color: #3f3a4f;padding:5px 0;"><span
									style="color: #8798ad;">平均点赞:</span>{{item.AvgLikeCount}}</p>
							<p style="font-size: 14px;color: #3f3a4f;padding:5px 0;"><span
									style="color: #8798ad;">平均投币:</span>{{item.AvgCoinCount}}</p>
						</div>
						<!-- 总数 -->
						<div class="info_sum" style="flex: 1;">
							<p style="font-size: 14px;color: #3f3a4f;padding:5px 0;"><span
									style="color: #8798ad;">总数:</span>{{item.ChargeTotal}}</p>
							<p style="font-size: 14px;color: #3f3a4f;padding:5px 0;"><span
									style="color: #8798ad;">当月:</span>{{item.ChargeCount}}</p>
						</div>
					</li>
				</ul>
			</div>
			<el-pagination background layout="prev, pager, next" :total="1000"
				style="margin-top: 10px;padding-left: 550px;" @current-change="pageFun">
			</el-pagination>
		</div>
		<!-- 根据视频内容获取的up主信息 -->
		<!-- UP主信息内容 -->
		<div class="search_b" v-if="keyword==1">
			<el-tabs v-model="search_b_tab" type="card" @tab-click="fun_getUpInfo">
				<el-tab-pane label="总粉丝最多" name="first">总粉丝最多</el-tab-pane>
				<el-tab-pane label="涨粉最多" name="second">涨粉最多
				</el-tab-pane>
				<el-tab-pane label="视频最多" name="zong">视频最多</el-tab-pane>
				<el-tab-pane label="平均播放最多" name="yue">平均播放最多</el-tab-pane>
			</el-tabs>
			<div class="ceiling"
				style="width: 100%;display: flex;height: 41px;background-color: #f7f8fa;line-height: 41px;font-size: 14px;color: #2e384d;">
				<p style="flex: 4;padding-left: 10px;">UP主信息</p>
				<p style="flex: 1;">最新投稿时间</p>
				<p style="flex: 1;">粉丝数 <i class="el-icon-info" style="color:#5830a0;"></i></p>
				<p style="flex: 1;">视频数</p>
				<p style="flex: 1;">平均播放</p>
			</div>
			<el-empty image="https://xsimg.endata.com.cn/rbw/noresult.png" description="请输入关键词查找"></el-empty>
		</div>
	</div>
</template>

<script>
	import {
		GetScreen,
		GetUpInfo
	} from '@/api/complete.js'
	export default {
		data() {
			return {
				classifylist: [], //up分类
				propertyfylist: [], //up属性
				activeName: 'first', //默认显示
				screen: true, //控制筛选条件的显示隐藏
				classify0: 0, //控制点击筛选切换背景
				classify1: 0,
				search_b_tab: 'first', //up主信息盒子切换
				region: '',
				keyword: 0, //控制那个up信息内容显示隐藏
				upList: [], //up信息数组
				loading: false,
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				search_tab_list: [{
					Sort: 2,
					rs: 0.1633234793865297
				}, {
					Sort: 8,
					rs: 0.5962382435955831
				}, {
					Sort: 4,
					rs: 0.5550210171567758
				}, {
					Sort: 9,
					rs: 0.12669339349710373
				}, {
					Sort: 12,
					rs: 0.6217800875809587
				}, {
					Sort: 11,
					rs: 0.9005222215449569
				}, {
					Sort: 10,
					rs: 0.8512928742511952
				}]
			}
		},
		mounted() {
			var content = document.querySelector(".content_right");
			var ceiling = document.querySelector(".content_right .ceiling"); //需要吸顶的盒子
			content.addEventListener("scroll", () => {
				var top = ceiling.getBoundingClientRect().top;
				console.log(top);
				if (top <= 50) {
					ceiling.className = "ceiling ceiling_fixed";
				} else if (top > 50) {
					ceiling.className = "ceiling";
				}
			})
		},
		created() {
			// 获取筛选信息
			GetScreen()
				.then(res => {
					if (res.data.Code === 200) {
						this.classifylist = res.data.Data.Tags;
						this.propertyfylist = res.data.Data.BloggerProps;
						// console.log(this.propertyfylist)
					}
				})
				.catch(err => {
					console.error(err)
				})
			// 获取up主信息
			this.getUpInfo(2, 0.1633234793865297);
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			scrollHd(event) {
				console.log(event, "event");
			},
			onSubmit() {
				console.log('submit!');
			},
			getUpInfo(Sort, rs, pageindex = 1, TagId = 0) {
				this.loading = true;
				// console.log(TagId);
				GetUpInfo({
						KeyWord: "",
						MainTagIds: [`${TagId==0?null:TagId}`], //判断是否是全部 
						SortType: Sort,
						pageindex: pageindex,
						pagesize: 10,
						r: rs,
					})
					.then(res => {
						if (res.data.Code == 200) {
							this.upList = res.data.Data.ItemList;
							this.loading = false; //解除加载
							// console.log(this.upList);
						} else {
							this.loading = false; //解除加载
						}
					})
					.catch(err => {
						this.loading = false; //解除加载
						console.error(err)
					})
			},
			// 控制关键字搜索显示隐藏
			fun_keyword(event) {
				if (event.name == 'first') {
					this.keyword = 0;
				} else if (event.name == 'second') {
					this.keyword = 1;
				}
			},
			// 点击切换up主内容
			fun_getUpInfo(event) {
				if (event.name == 'first') {
					this.getUpInfo()
				} else if (event.name == 'second') {
					this.getUpInfo(this.search_tab_list[1].Sort, this.search_tab_list[1].re)
				} else if (event.name == 'zong') {
					this.getUpInfo(this.search_tab_list[2].Sort, this.search_tab_list[2].re)
				} else if (event.name == 'yue') {
					this.getUpInfo(this.search_tab_list[3].Sort, this.search_tab_list[3].re)
				} else if (event.name == 'junbo') {
					this.getUpInfo(this.search_tab_list[4].Sort, this.search_tab_list[4].re)
				} else if (event.name == 'dianzan') {
					this.getUpInfo(this.search_tab_list[5].Sort, this.search_tab_list[5].re)
				} else if (event.name == 'tobi') {
					this.getUpInfo(this.search_tab_list[6].Sort, this.search_tab_list[6].re)
				}
			},
			pageFun(event) { //分页
				if (this.search_b_tab == "first") {
					this.getUpInfo(this.search_tab_list[0].Sort, this.search_tab_list[0].re, event)
				} else if (this.search_b_tab == 'second') {
					this.getUpInfo(this.search_tab_list[1].Sort, this.search_tab_list[1].re, event)
				} else if (this.search_b_tab == 'zong') {
					this.getUpInfo(this.search_tab_list[2].Sort, this.search_tab_list[2].re, event)
				} else if (this.search_b_tab == 'yue') {
					this.getUpInfo(this.search_tab_list[3].Sort, this.search_tab_list[3].re, event)
				} else if (this.search_b_tab == 'junbo') {
					this.getUpInfo(this.search_tab_list[4].Sort, this.search_tab_list[4].re, event)
				} else if (this.search_b_tab == 'dianzan') {
					this.getUpInfo(this.search_tab_list[5].Sort, this.search_tab_list[5].re, event)
				} else if (this.search_b_tab == 'tobi') {
					this.getUpInfo(this.search_tab_list[6].Sort, this.search_tab_list[6].re, event)
				}
			},
			fun_classify(index) { //筛选
				this.classify0 = index;
				this.getUpInfo(this.search_tab_list[1].Sort, this.search_tab_list[1].re, 1, this.classify0);
			}
		}
	}
</script>

<style scoped>
	/* 吸顶 */
	.ceiling_fixed {
		position: sticky;
		top: -25px;
		padding-top: 3px;
		z-index: 500;
		overflow: unset;
	}

	.search_t {
		padding: 0 15px;
		background-color: #fff;
	}

	/* 点击切换颜色 */
	.screen_p {
		color: #5830a0 !important;
	}

	/* 筛选 */
	.screen {
		padding-bottom: 10px;
	}

	.screen h2 span {
		display: inline-block;
		width: 4px;
		height: 14px;
		margin-right: 5px;
		margin-top: 4px;
		vertical-align: top;
		background-color: #542e99;
	}

	.classify {
		width: 100%;
		padding: 10px 0;
		height: 32px;
		font-size: 13px;
		color: #000;
		margin: 0 !important;
	}

	.classify:first-of-type {
		margin-bottom: 10px;
	}

	.classify:first-of-type li {
		color: #000;
	}

	.classify p {
		float: left;
		width: 66px;
		line-height: 26px;
	}

	.classify ul {
		float: left;
	}

	.classify ul li {
		float: left;
		padding: 3px 6px 0px 6px;
		margin-left: 15px;
		color: #666666;
		text-align: center;
		line-height: 20px;
		cursor: pointer;
	}

	/* 搜索框 */
	.authen {
		width: 100%;
		height: 60px;
		margin-top: 10px;
	}

	.authen .form_inp {
		float: left;
		margin-right: 40px;
	}

	/* 背景颜色 */
	.li_action {
		background-color: #542e99;
		color: #fff !important;
		border-radius: 5px;
	}

	/* up主信息 */
	.search_b {
		width: 100%;
		padding: 15px;
		margin-top: 20px;
		background-color: #fff;
	}

	.up_info {
		width: 100%;
		border-bottom: 1px solid #f6f7fa;
		background-color: #fff;
	}

	.up_info li {
		border-bottom: 1px solid #f6f7fa;
	}

	.up_info img {
		width: 60px;
		height: 60px;
		border-radius: 60px;
	}

	/* 标题 */
	.up_info .info_title>div p {
		display: inline-block;
		font-size: 16px;
		font-weight: 600;
		color: #454555;
		vertical-align: middle;
	}

	.up_info .info_title>div span {
		display: inline-block;
		padding: 0 10px;
		line-height: 16px;
		font-size: 12px;
		margin-left: 5px;
		border: 1px solid #ff576c;
		color: #fb7399;
		border-radius: 3px;
	}

	.up_info .info_title>div button {
		margin-top: 2px;
		border: 0;
		margin-left: 5px;
		padding: 2px 10px;
		border-radius: 20px;
		background-image: linear-gradient(-90deg, #3b82ff, #4ca2ff);
		color: #fff;
		font-size: 14px;
	}

	.action_bun {
		background-image: linear-gradient(-90deg, #ff4d77, #fc87a5) !important;
	}

	/* id */
	.info_id {
		padding: 5px 0;
		font-size: 12px;
		color: #555d6e;
	}

	/* 个性签名 */
	.selfdom>span {
		display: inline-block;
		padding: 0 10px;
		line-height: 20px;
		margin-right: 5px;
		color: #b9c3d2;
		border-radius: 3px;
		border: 1px solid #b9c3d2;
	}

	.selfdom p {
		display: inline-block;
		width: 672px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
<style>
	/* 字体图标大小 */
	.search_tab .el-icon-eleme {
		vertical-align: middle;
	}

	.search_tab .el-icon-eleme::before {
		font-size: 20px;
	}

	.search_tab .el-icon-s-platform {
		vertical-align: middle;
	}

	.search_tab .el-icon-s-platform::before {
		font-size: 20px;
	}

	/* 控制搜索框宽高 */
	.search_tab .el-input__inner {
		height: 35px;
		border-color: #5830a0;
	}

	.search_tab .el-button.el-button--default {
		height: 36px !important;
		border-radius: 0 5px 5px 0;
	}

	/* tab栏切换时背景颜色 */
	.search_tab .el-tabs__item.is-top.is-active {
		color: #5830a0;
	}

	.search_tab .el-tabs__item.is-top:hover {
		color: #5830a0;
	}

	.search_tab .el-tabs__active-bar.is-top {
		background-color: #5830a0;
	}

	/* 输入框高度 */
	.authen .el-input__inner {
		height: 26px !important;
	}

	.search_b .el-tabs__nav-wrap {
		margin-bottom: 0 !important;
	}

	.authen .el-select {
		width: 170px;
	}

	.authen .el-input__inner {
		border-color: #b9c3d2;
		border-radius: 1px;
	}

	.authen .form_inp .search_tab .el-input__inner {
		padding: 0;
	}

	.authen .el-form-item__label {
		text-align: left;
	}

	.authen .el-form {
		height: 40px;
	}

	.authen .el-range-editor.is-active,
	.el-range-editor.is-active:hover,
	.el-select .el-input.is-focus .el-input__inner {
		border-color: #5830a0;
	}

	/* up主信息 */
	.search_b .el-tabs__item {
		height: 26px;
		line-height: 28px;
		font-size: 13px;
	}

	.search_b .el-tabs__item.is-top {
		width: 90px;
		padding: 0 !important;
		text-align: center !important;
	}

	.search_b .el-tabs__item.is-top.is-active {
		color: #fff !important;
		background-color: #542e99;
	}

	.search_b .is-top:hover {
		color: #000;
	}

	.search_b .el-tabs--card>.el-tabs__header .el-tabs__item {
		transition: none;
	}

	.search_b .el-tabs__nav>div:first-of-type {
		border-radius: 2px 0 0 0;
	}

	.search_b .el-tabs__nav>div:last-of-type {
		border-radius: 0 2px 0 0;
	}

	.search_b .el-tabs__content {
		display: none;
	}

	.search_b .el-pagination.is-background {
		animation: none;
	}

	.search_b .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #542e99 !important;
		animation: none;
		animation: none;
	}

	.search_b .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
		color: #fff;
	}

	.search_b .el-pagination.is-background .el-pager li:hover {
		color: #000;
	}

	.search_b .el-pagination.is-background .el-pager {
		animation: none;
	}
</style>
